import axios from "axios";
import React, { useState,  useMemo } from "react";
import './index.scss'

const Child = React.memo((props) => {
    console.log('Child 被执行了');
    return <>
        <h1>
            Child - {props.info.name} - {props.info.age}
        </h1>
    </>
})

/*
    React.memo   缓存组件用的
    useCallback  缓存函数用的，子组件要给父组件传参的时候，记得缓存一下
    useMemo      缓存计算结果用的，缓存数据用的
*/


function App() {
    const [count, setCount] = useState(100)

    const [name] = useState('老王')
    const [age] = useState(18)

    // const info = {
    //     name,
    //     age
    // }
    // useMemo 是用来缓存计算结果用的
    const info = useMemo(() => {
        return {
            name,
            age
        }
    }, [name, age])

    return <div>
        <h1 id="title">App -- {count}</h1>
        <button onClick={() => setCount(count + 1)}>点击加 1</button>

        <hr />

        {/* <Child name={name} age={age} ></Child> */}
        <Child info={info}></Child>

    </div>
}


export default App